<title>HTML Editor</title>
<style type="text/css">
body
{
color:#000000;
background-color:#F9780E;
margin:4px;
margin-top:0px;
overflow:hidden;
}

.maintable
{
width:100%;
background-color:#F9780E;
color:#000000;
border:solid #000 1px;
margin-left:0px; 
}

.maintable td
{
padding-left:5px;
padding-right:5px;
}

.code_input, .result_output
{
border:1px solid #000;
width:100%;
height:400px;
background-color:#ffffff;
color:#000000;
}

.toptext
{
color:#000;
font-family:verdana;
margin-top:0px;
margin-bottom:8px;
font-size:120%;
}

.result_header
{
color:#FFF;
margin-top:0px;
font-family:verdana;
font-size:90%;
font-weight:800;
}

.bottomtext_div
{
margin-right:3px;
}

.bottomtext
{
color:#FFF;
font-family:verdana;
margin-bottom:0px;
margin-top:6px;
font-size:90%;
font-weight:800;
}

.toprect_txt a:link,.toprect_txt a:visited {text-decoration:none;color:#900B09;background-color:transparent}
.toprect_txt a:hover,.toprect_txt a:active {text-decoration:underline;color:#FF0000;background-color:transparent}

div.toprect_txt
{
font-family:verdana,helvetica,arial,sans-serif;
position:absolute;
left:0px;top:0px;
width:225px;height:84px;
padding:0px;margin:0px;padding-top:4px;
border:1px solid #c3c3c3;
color:#606060;
text-align:center;
font-size:12px;
}
div.toprect_img
{
font-family:verdana,helvetica,arial,sans-serif;
position:absolute;
left:0px;top:0px;
width:227px;height:90px;
margin:0px;padding:0px;
color:#606060;
text-align:center;
font-size:12px;
}

.button{
 background: #F9780E;
background: -webkit-linear-gradient(top, #F9780E 0%, #F9EAD4 100%);
background: -moz-linear-gradient(top, #F9780E 0%, #F9EAD4 100%);
background: -o-linear-gradient(top, #F9780E 0%, #F9EAD4 100%);
background: -ms-linear-gradient(top, #F9780E 0%, #F9EAD4 100%);
background: linear-gradient(top, #F9780E 0%, #F9EAD4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9780E', endColorstr='#F9EAD4',GradientType=0 );
border: 1px solid #F9780E;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 6px 12px;
margin:0;
-webkit-box-shadow: 0 1px 0 #F9780E inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0 #F9780E inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0 #F9780E inset, 1px 1px 1px rgba(223,223,223,0.4);
color: #000000;
text-shadow: 0 1px 0 #fff;
line-height: 1.2;
cursor: pointer;
font-weight:800;
font-size: 13px;}

.button:hover{
background: -webkit-linear-gradient(top, #FF6600 0%, #FED9BF 100%);
background: -moz-linear-gradient(top, #FF6600 0%, #FED9BF 100%);
background: -o-linear-gradient(top, #FF6600 0%, #FED9BF 100%);
background: -ms-linear-gradient(top, #FF6600 0%, #FED9BF 100%);
background: linear-gradient(top, #FF6600 0%, #FED9BF 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FED9BF',GradientType=0 );
text-decoration:none !important;}

#header-wrapper {background:#F9EAD4;margin:0 auto;padding:5px 10px 5px 5px;}
#header h1 {margin:10px; auto;padding:5px 5px .15em;font:bold 220% Oswald;font-weight:900;text-shadow: 1px 1px 10px #fff;}
#header a {color:#F9780E;text-decoration:none;}
#header a:hover {color:#000;}
#header .description {margin:0 auto;padding:0 5px 5px;max-width:100%;letter-spacing:.01em;font: normal normal 160% 'Cedarville Cursive', cursive;color: #c22400;text-shadow: 1px 1px 3px #fff;}
.description a {max-width:100%;letter-spacing:.01em;font: normal normal 160% 'Cedarville Cursive', cursive;color: #c22400!important; text-shadow: 1px 1px 3px #fff;}
.description a :hover {color:#c22400 !important;}


</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
</head>


<body>
<div id="header-wrapper">
<div class="header section" id="header">
<div class="widget Header" id="Header1">
<div id="header-inner">
<div class="titlewrapper">
<h1 class="title">
<a class="blog-title" href="http://www.blogg-tricks.blogspot.in/">HTML Editor</a>
</h1>
</div>
<div class="descriptionwrapper">
<div class="description">
by <a href="http://www.blogg-tricks.blogspot.com/">Blogger Tricks And Tips</a> </div>
</div>
</div>
</div>
</div>
<form method="post" name="form1">
<table border="0" class="maintable">
<tr>
<td width="50%">
<div class="result_header" style="float: left; margin-top: 8px; width: 100px;">
Source Code:</div>
<input class="button" onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()" style="float: right;" type="button" value="Preview" />
<input class="button" onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()" style="float: right;" type="button" value="Clear" />
<div style="clear: both;">
</div>
</td>
<td><div class="result_header" style="margin-top: 8px;">
Result:</div>
</td>
</tr>
<tr>
<td valign="top">
<textarea class="code_input" height="400px" id="pre_code" name="code" onclick="focus(this.code)" width="100%" wrap="logical"><style>

Add CSS Code Here

</style>


Add HTML Code Here

</textarea>
</td>
<td valign="top">
<iframe class="result_output" frameborder="0" height="400px" id="viewIFRAME" name="preview" src="about:blank" width="100%">
</iframe>


</td>
</tr>
<tr>
<td align="left" class="bottomtext">
Edit the code above and click "Preview" to see the result.
</td>
<td align="right" class="bottomtext">
Copyright &copy 2013 All Rights Reserved by P.Harikesh @  <a href="http://www.blogg-tricks.blogspot.com/" style="color: white;">Blogg-tricks</a>
</td>
</tr>
</table>
</form>
</div>
</body>

</div>
</div>
</div>
